<script>
export default {
  data() {
    return {
      dataForm: {
        materialName: '',
        materialNum: '',
      },
      tableData: [],
      multipleSelection: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
    }
  },
  mounted() {
    this.$http({
      url: this.$http.adornUrl("/purchase/orders/queryOrdersAll"),
      method: 'get',
      params: this.$http.adornParams({
        'page': this.pageIndex,
        'limit': this.pageSize,
      })
    }).then(resp => {
      console.log(resp.page)
      this.tableData = resp.page.list;
      this.totalPage = resp.page.totalCount;
    });
  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    // 多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 查询
    getDataList(){
      this.$http({
        url: this.$http.adornUrl("/purchase/orders/queryOrdersAll"),
        method: 'get',
        params: this.$http.adornParams({
          'page': this.pageIndex,
          'limit': this.pageSize,
          'materialName': this.dataForm.materialName,
          'materialNum': this.dataForm.materialNum,
        })
      }).then(resp => {
        console.log(resp.page)
        this.tableData = resp.page.list;
        this.totalPage = resp.page.totalCount;
      });
    },
    editStock(){
      let id = this.multipleSelection.map(item => item.id).join(",")
      // console.log(ids)
      // let ids = ""
      // this.multipleSelection.forEach(item => ids+=item.id+",")
      // console.log(ids)
      // this.$http({
      //   url: this.$http.adornUrl("/purchase/stock/findOrders"),
      //   method: 'get',
      //   params: {
      //     "ids":ids
      //   }
      // }).then(resp => {
      //   console.log(resp.ordersList)
      // });
      this.$router.push({name:"editStock",query: {ids:id}})
    },
  }
}
</script>

<template>
  <div class="mod-config">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-input v-model="dataForm.materialName" placeholder="物资名称" clearable></el-input>&nbsp;
        <el-input v-model="dataForm.materialNum" placeholder="物资编码" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
        <el-button v-if="isAuth('purchase:stock:save')" type="primary" @click="editStock()">编辑</el-button>
      </el-form-item>
    </el-form>

    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        header-align="center"
        align="center"
        width="50">
      </el-table-column>
      <el-table-column
        label="序号"
        prop="id"
        width="60">
<!--        <template slot-scope="scope">{{scope.row.id}}</template>-->
      </el-table-column>
      <el-table-column
        prop="materialNum"
        label="物资代码"
        width="120">
      </el-table-column>
      <el-table-column
        prop="materialName"
        label="物资名称"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="amount"
        label="数量"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="sumPrice"
        label="预算价格"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="ordersDate"
        label="需求时间"
        show-overflow-tooltip>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
  </div>
</template>

<style scoped lang="scss">
  ::v-deep .el-form-item__content .el-input{
    width: 200px;
  }
</style>
